
import React, { useState } from 'react';
import { Flex, Layout } from "antd";
import { Button, Menu, Space, Row } from "antd";
import { useNavigate, To } from 'react-router-dom';
const { Header, Content } = Layout;

const contentStyle: React.CSSProperties = {
  textAlign: "center",
  minHeight: 700,
  lineHeight: "120px",
  color: "#000",
  backgroundImage: 'url("/images/landing.jpg")',
  backgroundSize: 'cover'

};

const layoutStyle = {
  overflow: "hidden",
  // minWidth: "calc(50% - 8px)",
  // backgroundImage: 'url("/images/landing.jpg")',
  // backgroundSize:'cover'
};
//导航栏数据
const arr = [
  {
    key: '/',
    label: `首页`

  },
  {
    key: '/login',
    label: `用户经营`,

  },
]


// 导航栏数据map遍历
const items = arr.map((items, index) => ({
  key: items.key,
  label: `${items.label}`,

}));



const Landing: React.FC = () => {
  const [collapsed, setCollapsed] = useState(false);
  const navigate = useNavigate();
  const handleClick = () => {
    navigate('/login');
  }
  const onClick = (e: { key: To; }) => {
    navigate(e.key, { replace: true })

  };

  return (
    <Flex gap="middle" wrap >
      <Layout style={layoutStyle}>
        <Header style={{ display: 'flex', alignItems: 'center' }}>


          <Menu
            theme="dark"
            color="#000000"
            mode="horizontal"
            defaultSelectedKeys={['0']}
            items={items}
            style={{ flex: 1, minWidth: 0 }}
            onClick={onClick}
          />   <Space direction={"horizontal"}>


            <Button onClick={handleClick} >登录</Button>

          </Space>

        </Header>

        <Content style={contentStyle}>

        </Content>
      </Layout>
    </Flex>
  );
}

export default Landing;
